<style scoped lang="less">
  .layout {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
    &-menus {
      width: 200px;
      height: 100%;
      overflow-y: auto;
      background-color: #464c5b;
    }
    &-content {
      position: absolute;
      left: 200px;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      &-header {
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        flex: 0 0 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding: 0 10px;
      }
      &-main {
        position: relative;
        flex: 1;
        overflow-y: auto;
        &-wrap {
          position: relative;
          min-height: 100%;
          padding-bottom: 40px;
          .layout-content-copy {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: rgba(0, 0, 0, .1);
          }
        }
      }
    }
  }
</style>
<template>
  <div class="layout">
    <div class="layout-menus">
      <Menu theme="dark" :active-name="activeMenu.activeName" :open-names="activeMenu.openNames" width="auto"
            @on-select="onTapMenu" accordion>
        <div class="layout-logo-left"></div>
        <Submenu name="1">
          <template slot="title">
            <Icon type="home" :size="iconSize"></Icon>
            首页管理


          </template>
          <Menu-item name="/banner">轮播管理</Menu-item>
        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon type="ios-people" :size="iconSize"></Icon>
            售后管理


          </template>
          <Menu-item name="/afterservice">售后列表</Menu-item>
        </Submenu>
        <Submenu name="3">
          <template slot="title">
            <Icon type="person" :size="iconSize"></Icon>
            用户管理


          </template>
          <Menu-item name="/user">所有用户</Menu-item>
        </Submenu>
        <Submenu name="4">
          <template slot="title">
            <Icon type="speakerphone" :size="iconSize"></Icon>
            资源管理


          </template>
          <Menu-item name="/resourcecates">资源分类</Menu-item>
          <Menu-item name="/resource">资源列表</Menu-item>
          <Menu-item name="/coupon">优惠券列表</Menu-item>
        </Submenu>
        <Submenu name="5">
          <template slot="title">
            <Icon type="android-list" :size="iconSize"></Icon>
            订单管理


          </template>
          <Menu-item name="/order">订单列表</Menu-item>
        </Submenu>
        <Submenu name="6">
          <template slot="title">
            <Icon type="ios-cog" :size="iconSize"></Icon>
            系统管理

          </template>
          <Menu-item name="/feedback">反馈列表</Menu-item>
        </Submenu>
      </Menu>
    </div>
    <div class="layout-content">
      <!--<div style="min-width: 970px;min-height: 100%;">-->
      <div class="layout-content-header">
        <div class="left">{{userName}}</div>
        <div class="right"><a href="javascript:;" class="origin-a" @click="onLoginOut">退出</a></div>
      </div>
      <div class="layout-content-main">
        <div class="layout-content-main-wrap">
          <router-view></router-view>
          <div class="layout-content-copy">
            2017-2022 &copy; heroxiao


          </div>
        </div>
      </div>
      <!--</div>-->
    </div>
  </div>
</template>
<script>
  import storage from 'util/storage'
  import loginApi from 'service/system'
  export default {
    data () {
      return {
        userName: '',
        paths: [
          {id: '1', urls: ['/banner']},
          {id: '2', urls: ['/afterservice']},
          {id: '3', urls: ['/user']},
          {id: '4', urls: ['/resourcecates', '/resource','/coupon']},
          {id: '5', urls: ['/order']},
          {id: '6', urls: ['/feedback']}
        ]
      }
    },
    computed: {
      iconSize () {
        return 18
      },
      activeMenu(){
        let path = this.$route.path
        let obj = {}
        try {
          this.paths.forEach(item => {
            try {
              item.urls.forEach(im => {
                if (path.indexOf(im) === 0) {
                  obj.openNames = [item.id]
                  obj.activeName = im
                  throw new Error('break')
                }
              })
            } catch (e) {
              throw e
            }
          })
        } catch (e) {
        }
        return obj
      }
    },
    mounted(){
      /*let userName=storage.getUserName()
       if(!userName){
       this.$router.replace('/login')
       return
       }*/
      this.userName = storage.getUserName()
    },
    methods: {
      onTapMenu(path){
        this.$router.push(path)
      },
      onLoginOut(){
        loginApi.loginOut()
          .then(data => {
            storage.setUserName()
            this.$router.replace('/login')
          })
      }
    }
  }
</script>
